<template>
    <div class="brand">
        <header>
            <span></span>
            <h2>品牌宣传-菩提之光</h2>
        </header>
        <div class="project-introduction">
            <div class="subtitle">
                <span></span>
                <strong>项目介绍</strong>
            </div>
            <p>菩提心光，导演张智焜，代表作品《前世今生》、《舌尖素食》、《机器人妈妈》、《上师之路》，其中《前世今生》荣获中国微电影大赛华南地区最佳影等多项大奖</p>
        </div>
        <div class="image">
                <img src="../../../assets/img/brand-components.png" alt="">
        </div>
        <div class="action-plan">
            <div class="subtitle">
                <span></span>
                <strong>执行方案</strong>
            </div>
            <div class="text">
                <p><strong>1</strong>话题创建：如“首家机器人参与的佛教题材电影”等，新闻话题不少于8个</p>
                <p><strong>2</strong>新闻稿撰写：11-15篇原创深度新闻，行业资深记者撰写</p>
                <p><strong>3</strong>新闻发布：腾讯、网易、凤凰、今日头条、一点资讯等不少于120家主流媒体发布</p>
                <p><strong>4</strong>南方周末和腾讯娱乐2家专访报道</p>
                <p><strong>5</strong>百度百科词条创建及优化：维护周期1年</p>
            </div>
        </div>
        <div class="promotion-effect">
            <div class="subtitle">
                <span></span>
                <strong>宣传效果</strong>
            </div>
            <div class="text">
                <ul class="text-ul">
                    <li class="text-ul-li">
                        <strong>512万次</strong>
                        <p>阅读量</p>
                    </li>
                    <li class="text-ul-li">
                        <strong>1251次</strong>
                        <p>转发量</p>
                    </li>
                    <li class="text-ul-li">
                        <strong>1169次</strong>
                        <p>新闻评论</p>
                    </li>
                    <li class="text-ul-li">
                        <strong>503次</strong>
                        <p>有效新闻收录</p>
                    </li>
                    <li class="text-ul-li">
                        <strong>15工作日</strong>
                        <p>百度词条创立</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Brand',
    data () {
        return {

        }
    }
}
</script>
<style scoped>
.brand {
    margin-top: 100px;
}
.brand header {
    text-align: center;
}
.brand header span {
    display: inline-block;
    width: 55px;
    height: 39px;
    background: url("../../../assets/img/down.png") no-repeat;
    background-size: cover;
}
.brand header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.brand .project-introduction {
    width: 670px;
    margin: 0 auto;
    margin-top: 80px;
}
.brand .project-introduction .subtitle {
    display: flex;
}
.brand .project-introduction .subtitle span {
    width: 6px;
    height: 30px;
    display: inline-block;
    background-color: #1e90ff;
}
.brand .project-introduction .subtitle strong {
    font-size: 36px; /*px*/
    color: #05173b;
    margin-left: 12px;
}
.brand .project-introduction p {
    font-size: 30px; /*px*/
    color: #708090;
    margin-top: 40px;
    margin-left: 18px;
    line-height: 40px;
    display: inline-block;
}
.brand .image {
    margin: 0 auto;
    margin-top: 45px;
    width: 723px;
    height: 325px;
}
.brand .image img {
    width: 100%;
    height: auto;
}
.brand .action-plan {
    margin: 0 auto;
    width: 670px;
    margin-top: 50px;
}
.brand .action-plan .subtitle {
    display: flex;
}
.brand .action-plan .subtitle span {
    width: 6px;
    height: 30px;
    display: inline-block;
    background-color: #1e90ff;
}
.brand .action-plan .subtitle strong {
    font-size: 36px; /*px*/
    color: #05173b;
    margin-left: 12px;
}
.brand .action-plan .text {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
}
.brand .action-plan .text p {
    font-size: 30px; /*px*/
    color: #708090;
    line-height: 40px;
    display: inline-block;
    margin-left: 18px;
}
.brand .action-plan .text p strong {
    margin-right: 12px;
}
.brand .promotion-effect {
    width: 670px;
    margin: 0 auto;
    margin-top: 60px;
}
.brand .promotion-effect .subtitle {
    display: flex;
}
.brand .promotion-effect .subtitle span {
    width: 6px;
    height: 30px;
    display: inline-block;
    background-color: #1e90ff;
}
.brand .promotion-effect .subtitle strong {
    font-size: 36px; /*px*/
    color: #05173b;
    margin-left: 12px;
}
.brand .promotion-effect .text {
    margin-top: 40px;
    margin-left: 18px;
    display: flex;
    flex-direction: column;
}
.brand .promotion-effect .text .text-ul {
    height: 165px;
}
.brand .promotion-effect .text .text-ul .text-ul-li {
    float: left;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.brand .promotion-effect .text .text-ul .text-ul-li:nth-child(2) {
    margin-left: 120px;
}
.brand .promotion-effect .text .text-ul .text-ul-li:nth-child(3) {
    margin-left: 140px;
}
.brand .promotion-effect .text .text-ul .text-ul-li:nth-child(4) {
    margin-top: 40px;
}
.brand .promotion-effect .text .text-ul .text-ul-li:nth-child(5) {
    margin-left: 120px;
    margin-top: 40px;
}
.brand .promotion-effect .text .text-ul .text-ul-li strong {
    font-size: 36px; /*px*/
    color: #1e90ff;
}
.brand .promotion-effect .text .text-ul .text-ul-li p {
    font-size: 22px; /*px*/
    color: #708090;
}
@media screen and (max-width: 640px) and (min-width: 640px){
.brand .promotion-effect .text .text-ul .text-ul-li:nth-child(2) {
    margin-left: 90px;
}
.brand .promotion-effect .text .text-ul .text-ul-li:nth-child(3) {
    margin-left: 110px;
}
.brand .promotion-effect .text .text-ul .text-ul-lii:nth-child(5) {
    margin-left: 90px;
}    
}
</style>
